<script setup>
import { ref, onMounted } from "vue";
import AddCoursesClassify from "@/views/admin/components/AddCoursesClassify.vue";
import EditeCoursesClassify from "@/views/admin/components/EditeCoursesClassify.vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";

let pinpaiList = ref([]);
let selectedRows = ref([]);

const currentPage = ref(1);
const pageSize = ref(5);
let total = ref(0);
let dialogFormVisible = ref(false);
let kind = ref("add");
let data = ref(null);
let categoryName=ref('');

let detailDialogVisible = ref(false);
let selectedUser = ref({});


function handleCurrentChange(val) {
  currentPage.value = val;
  console.log('当前页码：', currentPage.value);
  getList();
}

function showDetail(row) {
  selectedUser.value = row;
  detailDialogVisible.value = true;
}

function handleSizeChange(val) {
  pageSize.value = val;
  getList();
  // alert(val);
}

function addCourses() {
  dialogFormVisible.value = true;
  kind.value = "add";
}

async function deleteSelected() {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的课程分类');
    return;
  }

  ElMessageBox.confirm('确定要删除选中的课程分类吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const ids = selectedRows.value.map(row => row.categoryId);
      const response = await axios.post('/api/courseCategory/deleteList', ids);

      ElMessage.success('删除成功');
      // 刷新列表
      getList();
    } catch (error) {
      ElMessage.success('删除失败');
    }
  }).catch(() => {
    ElMessage.success('取消删除');
  });
}


function editeAction(row) {
  dialogFormVisible.value = true;
  kind.value = "edite";
  data.value = row;
}

function addFormData(form) {
  pinpaiList.value.push(form);
  dialogFormVisible.value = false;
  getList();
}

function handleSelectionChange(selection) {
  selectedRows.value = selection;
}

function editeFormData(form) {
  for (let i = 0; i < pinpaiList.value.length; i++) {
    if (pinpaiList.value[i].id == form.id) {
      pinpaiList.value.splice(i, 1, form);
      break;
    }
  }
  dialogFormVisible.value = false;
  getList();
}

function handleReset() {
  categoryName.value = '';
  currentPage.value = 1;
  getList();
}

async function deleteAction(row) {
  ElMessageBox.confirm('确定要删除该课程分类吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const response = await axios.delete('/api/courseCategory/delete', {
        params: {
          categoryId: row.categoryId
        }
      });

      console.log('删除成功:', response.data);
      // 刷新列表
      getList();
    } catch (error) {
      console.error('删除失败:', error);
    }
  }).catch(() => {
    console.log('取消删除');
  });
}



async function getList() {
  try {
    const response = await axios.get('/api/courseCategory/list', {
      params: {
        currentPage: currentPage.value,
        pageSize: pageSize.value
      }
    });

    const { data } = response;
    console.log('API返回的数据:', data);

    pinpaiList.value = data.data.list;
    total.value = data.data.total;

  } catch (error) {
    console.error('获取数据失败:', error);
  }
}
async function handleSearch() {
  try {
    const response = await axios.get('/api/courseCategory/list', {
      params: {
        categoryName: categoryName.value,
        currentPage: currentPage.value,
        pageSize: pageSize.value
      }
    });

    const { data } = response;

    pinpaiList.value = data.data.list;
    total.value = data.data.total;

  } catch (error) {
    console.error('查询数据失败:', error);
  }
}






onMounted(() => {
  getList();
});
</script>

<template>
  <div class="pp-page">
    <el-row>
      <el-col :span="4">
        <h3 class="pp-title">课程分类管理</h3>
      </el-col>
      <el-col :span="4" :offset="16" style="text-align: right;">
        <el-button type="primary" size="small" @click="addCourses">添加</el-button>
        <el-button type="primary" size="small" @click="deleteSelected">删除</el-button>
      </el-col>

      <el-col :span="24" style="margin-top: 15px;border-top: 1px solid #f2f2f2; padding: 15px 0;">
        <el-row style="align-items: center;font-size: 14px;">
          <el-col :span="2" style="color: #999;padding-left: 10px;">分类名称：</el-col>
          <el-col :span="4">
            <el-input v-model="categoryName"></el-input>
          </el-col>
          <el-col :span="2" style="text-align: center">
            <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="default" size="small" @click="handleReset">重置</el-button>

          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-col :span="24">
            <el-table :data="pinpaiList" style="width: 100%" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55"/>
              <el-table-column prop="categoryId" label="序号" />
              <el-table-column prop="categoryName" label="课程类名" />
<!--              <el-table-column prop="parentId" label="父节点"/>-->
              <el-table-column label="操作列表" width="200">
                <template #default="scope">
<!--                  <el-button type="info" size="small" @click="showDetail(scope.row)">详细</el-button>-->
                  <el-button type="warning" size="small" @click="editeAction(scope.row)">编辑</el-button>
                  <el-button type="danger" size="small" @click="deleteAction(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24" style="display: flex;justify-content: flex-end;padding-top: 20px;">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[5, 10]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-dialog v-model="dialogFormVisible" :title="kind == 'add' ? '新增课程分类':'修改课程分类'" width="500">
      <AddCoursesClassify v-if="kind == 'add'" @addValue="addFormData"></AddCoursesClassify>
      <EditeCoursesClassify :data="data" @editeValue="editeFormData" v-else></EditeCoursesClassify>
    </el-dialog>
  </div>

<!--  <el-dialog v-model="detailDialogVisible" title="课程分类详细信息" width="500">-->
<!--    <div>-->
<!--      <p><strong>序号:</strong> {{ selectedUser.categoryId }}</p>-->
<!--      <p><strong>分类名称:</strong> {{ selectedUser.categoryName }}</p>-->
<!--&lt;!&ndash;      <p><strong>父节点:</strong> {{ selectedUser.parentId }}</p>&ndash;&gt;-->



<!--    </div>-->
<!--  </el-dialog>-->

</template>

<style scoped lang="less">
.pp-page {
  background-color: #fff;
  padding: 20px;
  min-height: 100%;

  .pp-title {
    font-size: 16px;
    color: #555;
  }
  .normal {
    color: #409EFF;
  }
  .disable {
    color:#C0C4CC;
  }
}
</style>
